<template>
  <avue-crud :option="option"
             :table-loading="loading"
             :data="data"
             v-model:page="page"
             v-model="form"
             ref="crud"
             @row-save="rowSave"
             @search-change="searchChange"
             @search-reset="searchReset"
             @selection-change="selectionChange"
             @current-change="currentChange"
             @size-change="sizeChange"
             @on-load="onLoad">
    <template #deviceName="{ row }">
      <el-tag size="large" style="cursor:pointer" @click="viewDetail(row)">{{ row.deviceName }}</el-tag>
    </template>
    <template #deviceSecret="{ row }">
      <el-tag size="large" style="cursor:pointer" @click="viewDetail(row)">{{ row.deviceSecret }}</el-tag>
    </template>
    <template #deviceStatus="{ row }">
      <el-tag v-if="row.deviceStatus===1" type="success" style="cursor: pointer">
        <el-icon>
          <SuccessFilled />
        </el-icon>
        {{ row.deviceStatusName }}
      </el-tag>
      <el-tag v-else-if="row.deviceStatus===2" type="danger" style="cursor: pointer">
        <el-icon>
          <WarningFilled />
        </el-icon>
        {{ row.deviceStatusName }}
      </el-tag>
      <el-tag v-else type="info" style="cursor: pointer">
        <el-icon>
          <CircleCloseFilled />
        </el-icon>
        {{ row.deviceStatusName }}
      </el-tag>
    </template>
    <template #menu-left>
      <el-button type="primary"
                 icon="el-icon-pointer"
                 @click="viewDevice">前往新增设备
      </el-button>
    </template>
    <template #menu="scope">
      <el-button text
                 type="primary"
                 icon="el-icon-view"
                 @click.stop="viewDetail(scope.row)">
        查看
      </el-button>
    </template>
  </avue-crud>
</template>
<script>
import { getList } from '@/api/iot/device';
import { validatenull } from '@/utils/validate';


export default {
  name: 'productSubset',
  props: {
    productKey: String,
    productId: String,
  },
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 172,
        lazy: true,
        searchShow: true,
        searchMenuSpan: 6,
        tip: false,
        border: true,
        index: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: true,
        menu: true,
        addBtnText: '添加子集',
        emptyText: '当前设备尚未添加任何子集',
        dialogWidth: 500,
        labelWidth: 120,
        searchLabelWidth: 100,
        column: [
          {
            label: '设备名称',
            prop: 'deviceName',
            type: 'input',
            slot: true,
            display: false,
            span: 24
          },
          {
            label: '设备密钥',
            prop: 'deviceSecret',
            type: 'input',
            slot: true,
            display: false,
            span: 24
          },
          {
            label: '设备所属产品',
            prop: 'productName',
            type: 'input',
            display: false,
            width: 200,
            span: 24
          },
          {
            label: '设备类型',
            prop: 'deviceType',
            type: 'input',
            display: false,
            width: 120,
            span: 24
          },
          {
            label: '设备状态',
            prop: 'deviceStatus',
            type: 'input',
            slot: true,
            display: false,
            width: 120,
            span: 24
          },
          {
            label: '最后上线时间',
            prop: 'lastOnlineTime',
            type: 'input',
            display: false,
            width: 180,
            span: 24
          },
        ]
      },
      data: []
    };
  },
  watch: {
    productId() {
      if (!validatenull(this.productId)) {
        this.onLoad(this.page);
      }
    }
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
    },
    viewDevice() {
      window.open(`/iot/device?productKey=${this.productKey}&productId=${this.productId}`);
    },
    viewDetail(row) {
      window.open(`/iot/device/detail/${row.productKey}/${row.deviceName}`);
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, {productKey: this.productKey})).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
  }
};
</script>

<style>
</style>
